<template>
    <div class="home-item-wrap">
    
        <div class="home-item" v-for="item in imgs">
    
            <span class="item-img" :class="item.name"></span>
            <span class="item-title">{{item.title}}</span>
    
        </div>
    
    
    </div>
</template>

<script>
    // imgs: [{title: '开户'}, '学院', '活动', '客服']
    
    export default {
        data() {
            return {
                imgs: [{
                    title: '开户',
                    name: 'account'
                }, {
                    title: '学院',
                    name: 'college'
                }, {
                    title: '活动',
                    name: 'meeting'
                }, {
                    title: '客服',
                    name: 'phone'
                }]
            }
        }
    }
</script>


<style lang="scss">
    // @import './homeItem.scss'
    @import '../../common/style/index.scss';
    .home-item-wrap {
        display: flex;
        background: #fff;
        border-bottom: 10px solid $appcolor;
        .home-item {
            flex: 1;
            text-align: center;
            padding: 10px 0 10px;
            .item-img {
                display: inline-block;
                width: 45px*1.25;
                height: 45px;
                background-size: 45px*1.25 45px;
                background-repeat: no-repeat;
                &.account {
                    @include bg-image('../../assets/images/home/开户');
                }
                &.college {
                    @include bg-image('../../assets/images/home/学院');
                }
                &.meeting {
                    @include bg-image('../../assets/images/home/活动');
                }
                &.phone {
                    @include bg-image('../../assets/images/home/客服');
                }
            }
            .item-title {
                display: inline-block;
                font-size: 14px;
            }
        }
    }
</style>